<template>
  <div>
    <div class="top">
      <el-form :inline="true">
        <el-form-item>
          <el-select v-model="value" :Popper-append-to-body="false">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="value" :Popper-append-to-body="false">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="姓名、手机号" v-model="input3" class="searchInput">
            <template #suffix>
              <i class="iconfont iconfangdajing" @click="search"></i>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button
        class="add"
        @click="dialogVisible = true"
        type="primary"
        size="small
      "
        >新增</el-button
      >
    </div>

    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"> </el-table-column>
      <el-table-column align="center" label="编号" width="120">
        <template v-slot="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column align="center" prop="station" label="岗位" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" prop="phone" label="手机号" width="120"> </el-table-column>
      <el-table-column align="center" label="创建时间" width="120">
        <template v-slot="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="创建人" width="120"> </el-table-column>
      <el-table-column align="center" prop="name" label="品牌数据权限" width="120"> </el-table-column>
      <el-table-column align="center" prop="name" label="状态" width="120">
        <template v-slot="scope">
          <el-switch v-model="scope.row.status" active-color="#fff" inactive-color="#f0f0f0" :class="{ 'switch-is-actived': scope.row.status }"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="操作" width="120" fixed="right"> </el-table-column>
    </el-table>
    <!-- <staffTable :cols="cols" :tableData="tableData" /> -->
    <pageNation />
    <el-dialog title="新增员工" v-model="dialogVisible" width="50%" close-on-press-escape top="0" :close-on-click-modal="false" :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="ruleForm" size="small">
        <el-form-item label="员工姓名" label-width="100px" prop="name" label-position="right">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="员工手机号" label-width="100px" prop="phone" label-position="right">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="员工岗位" label-width="100px" prop="station" label-position="right">
          <el-select v-model="form.station">
            <el-option value="1" label="产品经理">产品经理</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer
        >5
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- <div class="dialog"></div> -->
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
// import staffTable from '../../components/StaffManagetList/index'
import pageNation from '@/components/Pagination/index'

export default {
  components: {
    // staffTable
    pageNation
  },
  methods: {
    handleCommand(command) {
      this.$message('click on item ' + command)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    handleSelectionChange() {},
    submitForm(formName) {
      this.dialogVisible = false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  setup() {
    const state = reactive({
      tableData: [
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        },
        {
          num: '01',
          name: '王小虎',
          station: '上海市普陀区金沙江路 1518 弄',
          phone: '13333221112',
          createTime: '2016-03-11',
          creator: '张三',
          brandDataAuthority: '全部',
          status: true
        }
      ],
      cols: [
        {
          props: 'num',
          label: '编号'
        },
        {
          props: 'name',
          label: '姓名'
        },
        {
          props: 'station',
          label: '岗位'
        },
        {
          props: 'phone',
          label: '手机号'
        },
        {
          props: 'createTime',
          label: '创建时间'
        },
        {
          props: 'creator',
          label: '创建人'
        },
        {
          props: 'brandDataAuthority',
          label: '品牌数据权限'
        },
        {
          props: 'status',
          label: '状态'
        },
        {
          props: 'do',
          label: '操作'
        }
      ],
      multipleSelection: [],
      options: [
        {
          value: '全部状态',
          label: '全部状态'
        },
        {
          value: '可用',
          label: '可用'
        },
        {
          value: '禁用',
          label: '禁用'
        }
      ],
      value: '全部状态',
      input3: '',
      dialogVisible: false,
      form: {
        name: '',
        phone: '',
        station: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [{ required: true, message: '请选择活动区域', trigger: 'change' }]
      }
    })
    const search = (e) => {
      console.log(e)
    }

    return {
      ...toRefs(state),
      search
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-select-dropdown__item {
  text-align: center;
}
/deep/ .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #31c0fd;
  // color: #b4b4b4;
  background-color: rgb(247, 247, 247);
  border-radius: 2px;
}
.el-icon-date {
  cursor: pointer;
}
.el-icon-date:hover {
  color: #31c0fd;
}
.el-switch {
  // border: 1px solid #409eff;
  // border-radius: 10px;
  /deep/ .el-switch__core {
    background: #fff;
    &::before {
      content: '禁用';
      color: #b4b4b4;
      position: absolute;
      font-size: 12px;
      transform: scale(0.75);
      left: 14px;
      top: -1px;
    }
  }
  &.switch-is-actived {
    /deep/ .el-switch__core {
      border: 1px solid #31c0fd;
      &::before {
        content: '可用';
        color: #31c0fd;
        position: absolute;
        font-size: 12px;
        transform: scale(0.75);
        left: -1px;
        top: -2px;
      }
    }
    /deep/.el-switch__action {
      background-color: #31c0fd;
    }
  }
}
/deep/.el-switch__action {
  position: absolute;
  left: 2px;
  top: 3px;
  width: 12px;
  height: 12px;
  color: #b4b4b4;
}
// .switch .el-switch__label {
//     position: absolute;
//     color: #fff !important;
//     z-index: 1;
//     display: none;
// }
// .switch .is-active{
//     display: block;
// }
// .switch .el-switch__label--left span{
//     margin-left: 20px;
// }
// .dialog {
//   height: 100%;
//   width: 50%;
//   background-color: #fff;
//   position: absolute;
//   top: 0;
//   right: 0;
//   z-index: 999;
//   border-radius: 20px;
// }
/deep/.el-dialog {
  position: absolute;
  padding: 10px 30px;
  right: 0;
  height: 100%;
  .el-dialog__footer {
    text-align: left;
  }
  .el-dialog__header {
    border-bottom: 1px solid #ccc;
  }
}
.el-select,
.el-input {
  width: 200px;
}
</style>
